﻿$(function () {
  echarts_1();
  echarts_2();
  echarts_4();
  echarts_31();
  echarts_32();
  echarts_33();
  echarts_5();
  echarts_6();

  function echarts_1() {
    var myChart = echarts.init(document.getElementById('echart1'));

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        var jsonData = JSON.parse(this.responseText);

        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: jsonData.categories,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          },
          series: [
            {
              name: '站位数',
              type: 'bar',
              stack: '总量',
              silent: true,
              itemStyle: {
                color: 'transparent'
              },
              emphasis: {
                itemStyle: {
                  color: 'transparent'
                }
              },
              data: jsonData.dataA,
            },
            {
              name: '房间数量',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'top',
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: 15,
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                normal:{
                  show: true,
                  textStyle: {
                    fontSize: 15,
                    fontWeight: 'bold',
                    color: '#fff'  // 普通状态下的字体颜色为白色
                  }
                }
              },
              itemStyle: {
                color: function (params) {
                  var colorList = [
                    '#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80',
                    '#8D98B3', '#E5CF0D', '#97B552', '#95706D', '#DC69AA',
                    '#07A2A4', '#9A7FD1', '#588DD5', '#F5994E', '#C05050',
                    '#59678C', '#C9AB00', '#7EB00A', '#6F5553', '#C14089'
                  ];
                  return colorList[params.dataIndex % colorList.length];
                }
              },
              data: jsonData.dataB,
            }
          ]
        };

        myChart.setOption(option);

        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    };
    xmlhttp.open("GET", "./dataVisualization/data/echarts_1.json", true);
    xmlhttp.send();
  }
  function echarts_2() {
    var myChart = echarts.init(document.getElementById("echart2"));
    var categories = [];
    var data = [];
    var data2 = [];

    function updateData() {
      var axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
      categories.push(axisData);
      if (categories.length > 20) {
        categories.shift();
      }

      data.push(Math.round(Math.random() * 30));
      if (data.length > 20) {
        data.shift();
      }

      data2.push(+(Math.random() * 10 + 10).toFixed(1));
      if (data2.length > 20) {
        data2.shift();
      }
    }

    setInterval(function () {
      updateData();
      myChart.setOption({
        xAxis: { data: categories },
        series: [
          { data: data, type: 'line' },
          { data: data2, type: 'bar' }
        ]
      });
    }, 2000);

    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#283b56',
            color: '#ffffff'
          }
        }
      },
      grid: {
        left: '3%',
        top: '10%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
        data: ['实际入住量', '网络订房量'],
        textStyle: { color: '#ffffff' }
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: categories,
        axisLabel: { textStyle: { color: '#ffffff' } },
        axisLine: { lineStyle: { color: '#ffffff' } }
      },
      yAxis: [
        {
          type: 'value',
          scale: true,
          max: 40,
          min: 0,
          axisLabel: { textStyle: { color: '#ffffff' } },
          splitLine: { lineStyle: { color: '#ffffff' } },
          axisLine: { lineStyle: { color: '#ffffff' } }
        },
        {
          type: 'value',
          scale: true,
          max: 40,
          min: 0,
          axisLabel: { textStyle: { color: '#ffffff' } },
          splitLine: { lineStyle: { color: '#ffffff' } },
          axisLine: { lineStyle: { color: '#ffffff' } }
        }
      ],
      series: [
        {
          name: '实际入住量',
          type: 'line',
          data: data,
          itemStyle: {
            color: '#f05b72',
            opacity: 1,
            barBorderRadius: 5
          }
        },
        {
          name: '网络订房量',
          type: 'bar',
          data: data2,
          itemStyle: {
            // color: '#61a0a8',
            color: function (params) {
              var colorList = [
                '#F7CAC9', '#A6C1E1', '#FFB347', '#6699CC', '#F19CBB', '#98FB98', '#F9A7B0', '#FF6961', '#B39EB5', '#77DD77', '#FFD700', '#40E0D0', '#C71585', '#00CED1', '#FF6347', '#AFEEEE', '#FFA07A', '#87CEEB', '#DDA0DD', '#00FA9A', '#FFC0CB', '#ADD8E6', '#FFA500', '#8A2BE2', '#FF4500', '#FFDAB9', '#20B2AA', '#B0C4DE', '#BA55D3', '#00FF7F', '#FF69B4', '#6A5ACD', '#FF8C00', '#9932CC', '#FF0000', '#FFFFE0', '#4682B4', '#D8BFD8', '#FF1493', '#008000'
              ];
              return colorList[params.dataIndex % colorList.length];
            },
            barBorderRadius: 5,
            opacity: 0.7,
            barBorderRadius: 8
          }
        }
      ]
    };
    myChart.setOption(option);

    window.addEventListener('resize', function () {
      myChart.resize();
    });
  }





  function echarts_5() {
    var myChart = echarts.init(document.getElementById("echart5"));
    var data = {};

    fetch("dataVisualization/data/echarts_5.json") // 替换为你的API地址
      .then(function (response) {
        return response.json();
      })
      .then(function (result) {
        data.xAxisData = result.xAxisData;
        data.seriesData = result.seriesData;
        data.seriesData2 = result.seriesData2; // 新添加的seriesData2变量

        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: ["月平均人数", "每月极值"], // 图例数据
            textStyle: {
              color: 'rgba(255, 255, 255, 0.6)'
            }
          },
          grid: {
            left: "3%",
            top: "10%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: data.xAxisData,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                  width: 1,
                  type: "solid",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: "12",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: "12",
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                  width: 1,
                  type: "solid",
                },
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                },
              },
            },
          ],
          series: [
            {
              name: "月平均人数", // 对应图例的名称
              data: data.seriesData,
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 10,
              lineStyle: {
                color: "#2f89cf",
                width: 2,
              },
              itemStyle: {
                color: "#2f89cf",
              },
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ]
              }
            },
            {
              name: "每月极值", // 对应图例的名称
              type: 'scatter',
              data: data.seriesData2,
              symbol: 'rect',
              symbolSize: 12,
              itemStyle: {
                color: 'orange',
              }
            }
          ],
        };

        myChart.setOption(option);

        window.addEventListener("resize", function () {
          myChart.resize();
        });

        myChart.on('click', function (params) {
          if (params.componentType === 'series') {
            if (params.seriesType === 'line') {
              console.log("你点击了折线图数据点：" + params.value);
            } else if (params.seriesType === 'scatter') {
              console.log("你点击了散点图数据点：" + params.value);
            }
          }
        });
      })
      .catch(function (error) {
        console.log("请求数据失败：" + error);
      });
  }






  function echarts_4() {
    var myChart = echarts.init(document.getElementById("echart4"));
    $.ajax({
      url: 'dataVisualization/data/echarts_4.json',
      method: 'GET',
      dataType: 'json',
      success: function (response) {
        var data = response.data;
        var xAxisData = response.xAxisData;
        var seriesData = data.map(function (item) {
          return [item[0], item[1], item[2], item[3]];
        });

        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            grid: {
              left: "3%",
              top: "10%",
              right: "4%",
              bottom: "0",
              containLabel: true,
            },
            backgroundColor: 'rgba(50, 50, 50, 0.8)', // 提示框背景颜色及透明度
            borderWidth: 1,
            borderColor: '#333', // 提示框边框颜色
            padding: 10,
            textStyle: {
              color: '#fff' // 提示框文字颜色
            },
            formatter: function (param) {
              var item = param[0];
              return [
                '日期: ' + item.name + '<hr size=1 style="margin: 3px 0">',
                '发售价: ' + item.data[1] + '<br/>',
                '结束价: ' + item.data[2] + '<br/>',
                '最低价: ' + item.data[3] + '<br/>',
                '最高价: ' + item.data[4] + '<br/>'
              ].join('');
            }
          },
          xAxis: {
            type: 'category',
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.8)' // X 轴颜色设置为半透明白色
              }
            },
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            scale: true,
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.8)' // Y 轴颜色设置为半透明白色
              }
            },
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [{
            type: 'candlestick',
            data: seriesData,
            animation: false,
            itemStyle: {
              color: '#ff5722',   // 上涨的蜡烛图颜色
              color0: '#4caf50',  // 下跌的蜡烛图颜色
              borderColor: '#ff5722',
              borderColor0: '#4caf50'
            }
          }]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      error: function (xhr, status, error) {
        console.error('Ajax request failed:', error);
      }
    });
    

  }


  function echarts_6() {
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById("echart6"));

    // 使用 Fetch API 获取外部 JSON 数据
    fetch("dataVisualization/data/echarts_6.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        // 更新 ECharts 配置
        var option = {
          color: data.colors,
          tooltip: {
            show: true,
            formatter: "{a} : {c}",
          },
          legend: {
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 12,
            bottom: "3%",
            data: data.legendData,
            textStyle: {
              color: "rgba(255,255,255,.6)",
            },
          },
          series: [
            {
              name: "地区",
              type: "pie",
              radius: ["25%", "70%"],
              center: ["50%", "40%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8
              },
              label: {
                normal: {
                  show: true,
                  position: 'outside',
                  textStyle: {
                    color: '#fff'  // 普通状态下的字体颜色为白色
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    color: '#ff7c7c',  // 高亮状态下的字体颜色为其他颜色
                    fontSize: 16  // 高亮状态下的字体大小变大一点
                  }
                }
              },
              data: data.seriesData
            }
          ],
        };

        // 显示图表
        myChart.setOption(option);

        // 监听窗口大小改变事件，自适应图表大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }



  function echarts_31() {
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById("fb1"));

    // 使用 Fetch API 获取外部 JSON 数据
    fetch("dataVisualization/data/echarts_31.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (responseData) {
        var labels = responseData.labels;
        var data = responseData.data;

        var option = {
          title: {
            text: "入住年龄分布",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (pos, params, dom, rect, size) {
              return [pos[0] + 10, pos[1] - 10];
            },
          },
          legend: {
            top: "70%",
            itemWidth: 10,
            itemHeight: 10,
            data: labels,
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: 12,
            },
          },
          series: [
            {
              name: "年龄分布",
              type: "pie",
              center: ["50%", "42%"],
              radius: ["40%", "60%"],
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              label: {
                show: true,
                formatter: "{b}: {c} ({d}%)",
                color: "rgba(255, 255, 255, 0.7)",
              },
              labelLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.7)",
                },
              },
              itemStyle: {
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
          ],
          color: ["#5470C6", "#91CC75", "#EE6666", "#73C0DE", "#3BA272", "#FC8452", "#9A60B4", "#EA7CCC"],
        };

        // 显示图表
        myChart.setOption(option);

        // 监听窗口大小改变事件，自适应图表大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  function echarts_32() {
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById("fb2"));

    // 使用 Fetch API 获取外部 JSON 数据
    fetch("dataVisualization/data/echarts_32.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (jsonData) {
        var data = jsonData.categories;
        var legendData = jsonData.names.map(function (item) {
          return item.name;
        });

        var option = {
          title: {
            text: "入住职业分布",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (p) {
              return [p[0] + 10, p[1] - 10];
            },
          },
          legend: {
            top: "70%",
            itemWidth: 10,
            itemHeight: 10,
            data: legendData,
            textStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              fontSize: 12,
            },
          },
          series: [
            {
              name: "职业分布",
              type: "pie",
              center: ["50%", "42%"],
              radius: ["40%", "60%"],
              color: [
                "#5470C6",
                "#91CC75",
                "#EE6666",
                "#73C0DE",
                "#3BA272",
                "#FC8452",
                "#9A60B4",
                "#EA7CCC",
                "#FFD700",
                "#9ACD32",
              ],
              label: { show: true, fontSize: 12, color: "rgba(255, 255, 255, 0.7)" },
              labelLine: { show: true, lineStyle: { color: "rgba(255, 255, 255, 0.7)" } },
              data: data,
            },
          ],
        };

        // 显示图表
        myChart.setOption(option);

        // 监听窗口大小改变事件，自适应图表大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }



  function echarts_33() {
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById("fb3"));

    // 使用 Fetch API 获取外部 JSON 数据
    fetch("dataVisualization/data/echarts_33.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        var option = {
          title: {
            text: "入住时间分布",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (p) {
              return [p[0] + 10, p[1] - 10];
            },
          },
          legend: {
            top: "70%",
            itemWidth: 10,
            itemHeight: 10,
            data: data.legendData, // 使用从服务器获取的图例数据
            textStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              fontSize: 12,
            },
          },
          series: [
            {
              name: "时间分布",
              type: "pie",
              center: ["50%", "42%"],
              radius: ["40%", "60%"],
              color: data.colorData, // 使用从服务器获取的颜色数据
              label: { show: true, fontSize: 12, color: "rgba(255, 255, 255, 0.7)" },
              labelLine: { show: true, lineStyle: { color: "rgba(255, 255, 255, 0.7)" } },
              data: data.seriesData, // 使用从服务器获取的系列数据
            },
          ],
        };

        // 显示图表
        myChart.setOption(option);

        // 监听窗口大小改变事件，自适应图表大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }
});
